<template>
  <div class="init-container">
    <Drawer
      :title="G_title"
      :placement="placement"
      :closable="true"
      v-model="isShow"
      :mask="false"
      draggable
      :width="width"
      @on-resize-width="onDrawerWidth"
      ref="drawer"
    >
      <div class="body-main">
        <div class="grid-container">
          <o-base-grid
            :compBoxInfo="GT_compBoxInfo"
            :config="config"
            @on-cell-dblclick="onCellDblclick"
            @on-row-change="onCellClick"
          />
        </div>
        <div class="graph-container">
          <div :id="G_pageID" class="full-width-height" />
        </div>
      </div>
    </Drawer>
  </div>
</template>

<script lang="ts">
import {
  Tsrv,
  T_srv,
  ifs,
  ts,
  tvs,
  graphCfg,
  GraphOptions,
  G6,
  vue,
  gridConf
} from './config';

@T_srv.comp({
  components: {}
})
export default class oOpenGraphData extends vue {
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  @T_srv.prop({
    required: true,
    type: String,
    validator: v => !!v.replaceAll(` `, ``)
  })
  title: string;

  @T_srv.prop({
    required: false,
    type: String,
    default: 'left',
    validator: v => /^left$|^right$/.test(v)
  })
  placement: string;

  @T_srv.ref(`drawer`) G_drawer: any;

  private width: string = '800px';

  /* 组件名 */
  private G_compName: string = 'oOpenGraphData';

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  private isShow: boolean = false;

  private G_title: string = undefined;

  private G_pageID: string; // 画布ID

  private G_graphCfg: GraphOptions = graphCfg();

  private G_graph: any;

  private G_data: Array<any> = [];

  private config: any = gridConf();

  get G_isShow(): boolean {
    return this.isShow;
  }

  set G_isShow(v: boolean) {
    if (this.isShow !== v) {
      this.isShow = v;
    }
  }

  created() {
    this.G_pageID = `${Tsrv.utils.custUUID(5, 16)}-graph-container`;
    this.G_title = this.title;

    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
  }

  mounted() {
    /* 向父组件发送实例 */
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$nextTick(this.createGraph);
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
    this.G_graph.destroy();
  }

  createGraph() {
    setTimeout(() => {
      this.G_graphCfg.height =
        document.getElementById(this.G_pageID).scrollHeight || 400;
      this.G_graphCfg.width =
        document.getElementById(this.G_pageID).scrollWidth || 490;
      this.G_graphCfg.container = this.G_pageID;
      this.G_graph = new G6.Graph(this.G_graphCfg);
    }, 10);
  }

  @T_srv.emit('on-cell-dblclick')
  onCellDblclick(e: any) {
    this.G_isShow = false;
  }

  onCellClick(e: any) {
    e?.data?.to.row && this.loadGraph(e.data.to.row);
  }

  public loadGraph(row: any) {
    // const req = new ts.T_ruleReq();
    // req.tableName = Tsrv.globalVar.tableName.RULE_LIB;
    // req.type = 'query';
    // req.params = {
    //   filter: { id: row.id },
    //   options: {
    //     fields: [{ graph_data: 1 }, { _id: 0 }], // fields[] 为全布字段
    //     sort: {},
    //     pageSize: 10,
    //     pageNo: 1
    //   },
    //   data: null
    // };
    const fields = [{ graph_data: 1 as tvs.V_01 }, { _id: 0 as tvs.V_01 }];
    const filter = { id: row.id };
    Tsrv.ruleQuery(
      Tsrv.globalVar.tableName.RULE_LIB,
      fields,
      filter,
      30,
      1
    ).then(item => {
      const [b, res, d, m] = item;
      if (!Tsrv.utils.noValue(m) || !b) {
        this.$msg(m);
      }
      if (Array.isArray(d) && d.length > 0) {
        this.setGraphData(d[0]['graph_data']);
      }
    });
  }

  setGraphData(graph: any) {
    this.G_graph.read(graph);
    this.G_graph.fitView();
  }

  setDisplay(b: boolean) {
    this.G_isShow = b;
  }

  onDrawerWidth(e) {
    const self = this;
    setTimeout(() => {
      let h: number = document.getElementById(this.G_pageID).clientHeight;
      let w: number = document.getElementById(this.G_pageID).clientWidth;
      if (w - 10 < 0) {
        w = 0;
      }
      if (h - 10 < 0) {
        h = 0;
      }
      self.G_graph.changeSize(w, h);
      self.G_graph.fitView();
    }, 10);
  }
}
</script>
<style lang="scss" scoped>
// ::v-deep .ivu-drawer-content {
//   top: 42px;
// }
::v-deep .ivu-drawer-body {
  padding: 0px;
}
::v-deep .vxe-toolbar {
  border-top: 2px solid #f4f4f4;
  // border-bottom: 1px solid #f4f4f4;
  padding: 6px;
}
::v-deep .vxe-button {
  border: 1px solid #fff;
}
::v-deep .ivu-drawer-wrap .ivu-drawer {
  height: calc(100vh - 42px);
  top: 42px;
}
.graph-container {
  flex: auto;
  flex-shrink: 1;
  order: 2;
  overflow: auto;
}
.grid-container {
  flex-shrink: 0;
  height: calc(100vh / 2);
  order: 1;
}
.body-main {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
